<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=60a0df0b951883af3b670c3823c6810b"></script>
</head>

<body>
    <div class="time">
        <span animated bounceIn>Are you ready?</span>
    </div>
    <div class="mask-runing">
        <div class="container dpflex fdco mask-c">
            <div class="run-info">
                <h6 class="cf5">户外跑</h6>
                <div class="cw dfbc run-title">
                    <span class="run-text">运动中</span>
                    <p>
                        <span class="iconfont icon-yinle"></span>
                        <span class="iconfont icon-shezhi2"></span>
                    </p>
                </div>
                <!-- 累计距离 -->
                <div class="miles tcenter cw">
                    <span class="miles-num" id="milesNum">0.00</span>
                    <span class="miles-unit">公里</span>
                </div>
            </div>
            <div class="run-center dfbc">
                <p class="text cf5 fs14">GPS信号低,数据精准度低</p>
                <span class="line flex1"></span>
                <span class="iconfont icon-dingwei"></span>
            </div>
            <div class="run-dashboard dfbc flex1">
                <div class="dashboard-pace flex1 dfcc fdco">
                    <span class="iconfont icon-sudu"></span>
                    <p class="pace-text">配速</p>
                    <p><span class="pace-num" id="paceNum">0</span>米/秒</p>

                </div>
                <div class="dashboard-time flex1 dfcc fdco">
                    <span class="iconfont icon-linedesign-04"></span>
                    <p class="time-text">用时</p>
                    <span class="time-num" id="timeNum">00:00:00</span>

                </div>
                <div class="dashboard-calorie flex1 dfcc fdco">
                    <span class="iconfont icon-huo"></span>
                    <p class="calorie-text">千卡</p>
                    <span class="calorie-num" id="calorieNum">11</span>

                </div>
            </div>
            <div class="btn-group flex1">

                <div class="stop-btn h100" id="stopBtn">

                    <div class="dfcc h100">
                        <div class="dfcc fdco stop" id="stop">
                            <span class="iconfont icon-bofangzanting"></span>
                            <span class="word">暂停</span>
                        </div>

                    </div>

                </div>

                <div class="continue-btn h100 cw" id="continueBtn">
                    <div class="dfec h100">
                        <div class="dfcc h100">
                            <div class="dfcc fdco continues" id="continues">
                                <span class="iconfont icon-sanjiaoxing"></span>
                                <span class="word">继续</span>
                            </div>
                        </div>
                        <div class="dfcc h100">
                            <div class="dfcc fdco end" id="end">
                                <span class="iconfont icon-jieshu1"></span>
                                <span class="word">结束</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>